
import React, { memo, useEffect, useState } from "react";
import { reqRecommend } from "../../../../api/find";
import { formatNum } from '@/utils'
import style from './sty.module.css'
import { Link } from 'react-router-dom'
const Recommend = () => {
  const [recommend, setRecommend] = useState([]);
  useEffect(() => {
    reqRecommend().then(res => {

      const list = res.result || []
      setRecommend(list.slice(0, 6))
    })
  }, [])

  return <div className={style.root}>
    <div onClick={() => this.props.history.push('/playlists')}>每日推荐 <span className={'iconfont' +
      ' icon-iconfontjiantou5'} style={{ fontSize: 12 }} /></div>
    <ul className={style.list}>
      {recommend && recommend.map(sheet => <li key={sheet.id}>
        <Link to={`/sheet/${sheet.id}`} className={style['sheet-box']}>
          <img src={sheet.picUrl} alt="" />
          <div className={style.desc} >{sheet.name}</div>
          <p className={style.playCount}   ><span className={'iconfont icon-erji1'} style={{ fontSize: 12 }} /> {formatNum(sheet.playCount)}</p>
        </Link>
      </li>)}
    </ul>
  </div>
}
export default memo(Recommend)